<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
	</head>
	<body>
		<div><input id="input1" placeholder="可以用拼音查找"/></div>
		<div id ="xxx1"></div>
	</body>
    <script type="module">
	import  xTree from './js/src/xTree.js';
	import {south} from './js/data/chinaTree.js'
	import xBind from "./js/src/xBind.js";
	
	let cfg = {
     	el:"xxx1",
     	data:south,
     	expand:"node 430104",
     	check:true
     }
     	 
    let xt = new xTree(cfg);
    
	
	function  eventinput1(value){
		console.log(value);
    	xt.filter(callbackFilter,value)
    }
    
    function callbackFilter(node,value){
    	let result =true;
    	if(value){
    		result = false;
    		let p = node;
    		while(p){
    			if(p.pinyin.toLowerCase().indexOf(value.toLowerCase())>-1 || p.hint.indexOf(value)>-1)
    				result = true;
    			if(result) break;
    			p = p._parent;
    		}
    	} 	 
    	return result;    
    }
    
	let _obj ={
		filter:""
	}
	
	let _binds = [{el:"input1",key:"filter",type:"value",event:eventinput1}]  
    
    new xBind({obj:_obj,binds:_binds});
    
	</script>
</html>
